<script type="text/x-template" id="summernote-template">
    <textarea ref="ta" :id="id"></textarea>
</script>
<style>
    .note-modal-backdrop {
        display: none!important;
    }
</style>
<script>
    Vue.component('Summernote', {
        template: '#summernote-template',
        props: {
            value: {
                type: String,
                default: ''
            },
            height: {
                type: Number,
                default: 300,
            }
        },
        data () {
            return {
                id: parseInt(Math.random() * 100000) + ''
            }
        },
        watch: {
            value(v) {
                if(v != $('#' + this.id).summernote('code')) {
                    console.log('watch', v)
                    $('#' + this.id).summernote('insertText', v)
                }
            } 
        },
        mounted() {
            const that = this
            const $node = $('#' + this.id)
            $node.summernote({
                height: this.height,
                callbacks: {
                    onChange: function(contents, $editable) {
                        that.$emit('input', contents)
                    },
                    onImageUpload: function(files) {
                        uploadServer('/admin/upload', files[0], () => {}, function(res, data) {
                            if(!res) return
                            $node.summernote('insertImage', data.url, data.name)
                        })
                    }
                }
            })
            if(this.value) {
                $node.summernote('code', this.value)
            }

        },
        methods: {
        }
    })
</script>